<template>
    <div>
        <h2 class="name">添加轮播</h2>
        <div class="container">
            <el-form
                label-position="left"
                label-width="100px"
                :model="form"
                style="max-width: 500px"
                ref="myform"
                :rules="rules"
                >
                <el-form-item 
                    label="商品名称"
                    prop="tran"
                    >
                    <!-- <el-input v-model="form.name" clearable placeholder="请输入商品名称" /> -->
                    <input type="file" ref="files">
                </el-form-item>
               
                <el-form-item 
                    label="轮播类型"
                    prop="typeid"
                    >
                    <el-select v-if="typeList.length>0" clearable v-model="form.typeid" placeholder="请选择" size="middle">
                        <el-option
                        v-for="(val,key) in typeList"
                        :key="key"
                        :label="val.typename"
                        :value="val.typevalue"
                        />
                    </el-select>
                </el-form-item>
                <div class="button">
                    <el-button type="primary" class="confirm" @click="submitForm">
                        确定
                    </el-button>
                    <el-button type="warning" class="confirm" @click="reset">
                        重置
                    </el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>
<script>
import { reactive, toRefs ,ref} from 'vue';
import { ElMessage } from 'element-plus';
import {ajax} from '@/api' ;
import {useRouter} from 'vue-router';
export default {
    setup(props){
        const state = reactive({
            form:{},
            rules:{
                typeid:[
                    {required:true,message:'请填写类型'}
                ]
            }
        });
        const myform = ref();
        const files = ref();
        const router = useRouter();
        const reset = ()=>{
            myform.value.resetFields();
        }
        const submitForm = ()=>{
            myform.value.validate( async (valid)=>{
                if(valid){
                    let filename = files.value.files[0];
                    let form = new FormData();
                    form.append('file',filename);
                    let {path} = await ajax.uploadfiles(form);
                    // console.log({transImg:path,typeid:state.form.typeid});
                    let {code,data} = await ajax.addTran({transImg:path,typeid:state.form.typeid});
                    if(code == 200){
                        router.push({path:'/main/tranList'});
                    }
                }else {
                    ElMessage.error('请输入有效信息');
                }
            });
        }
        return {
            ...toRefs(state),
            myform,
            reset,
            submitForm,
            files
        }
    }
}
</script>
<style lang="scss" scoped>
.name{
    height: 60px;
    line-height: 60px;
    padding-left: 40px;
    color: #fff;
    font-weight: 600;
    font-size: 18px;
    background-color: burlywood;
}
.container{
    margin-top: 15px;
    margin-left: 15px;
    .button{
        display: flex;
        justify-content: space-around;
        .confirm{
            width: 30%;
        }
    }
}
</style>